<template>
  <div class="product" v-loading="loading">
    <!-- <el-row style="margin: 0 0 10px">
      <el-col :span="20">
        <el-form :model="queryPanel" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="应用名">
                <el-input clearable v-model="queryPanel.app_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="应用类型">
                <el-select
                  v-model="queryPanel.app_type"
                  clearable
                  placeholder="请选择"
                >
                  <el-option label="产品" :value="0"></el-option>
                  <el-option label="服务" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="2" style="text-align: right">
        <el-button type="primary" @click="queryData">查询</el-button>
      </el-col>
    </el-row> -->
    <ul>
      <li v-for="(item, i) in productData" :key="i">
        <div class="product_img">
          <img :src="item.app_img" alt="" />
        </div>
        <div class="product_content">
          <div class="product_content_text">
            <h4>{{ item.app_name }}</h4>
            <p>
              <span
                ><strong style="font-size: 12px">￥</strong
                >{{ item.price_yuan }}</span
              ><sub>元</sub>
            </p>
          </div>
          <div class="product_content_btn">
            <span>购买</span>
            <span @click="trial(item, 1)">试用</span>
          </div>
        </div>
      </li>
    </ul>

    <el-dialog
      title="试用申请"
      :visible.sync="dialogVisible"
      width="40%"
      @close="closeFun"
    >
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="记录编号">
          <el-input v-model="form.record_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="应用名称">
          <el-input v-model="form.app_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请人编码">
          <el-input v-model="form.proposer_code" disabled></el-input>
        </el-form-item>
        <el-form-item label="申请人类型">
          <el-select v-model="form.proposer_type" placeholder="请选择" disabled>
            <el-option label="机构" :value="0"></el-option>
            <el-option label="个人" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应用编码">
          <el-input v-model="form.app_code" disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="应用编制">
          <el-input v-model="form.app_org"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input v-model="form.create_by"></el-input>
        </el-form-item> -->
        <el-form-item label="备注">
          <el-input type="textarea" :rows="3" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getApp, getImg, addTrial } from "@/service/app";
import { mapGetters } from "vuex";
// import myproduct from "../control/myproduct/index";
export default {
  name: "product",
  components: {
    // myproduct,
  },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      productData: null, //应用数据
      imgurl: null,
      form: {
        record_id: null, //记录id
        app_code: null, //应用编码
        proposer_code: null, //申请人编码
        proposer_type: null, //申请人类型
        app_org: null, //应用编制
        fauditpoint: 1, //审批
        order_type: null, //订单类型
        app_name: null, //应用名
        create_by: null, //创建人
        price: null, //价格
        remark: null, //备注
      },

      queryPanel: {
        app_name: null,
        app_type: null,
      },
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  methods: {
    trial(data, order) {
      this.dialogVisible = true;
      let form = this.form;
      form.app_code = data.app_code;
      form.proposer_code = this.name;
      form.app_org = data.create_by;
      form.order_type = order;
      form.app_name = data.app_name;
      form.record_id = new Date().valueOf();
      form.proposer_type = 1;
      if (order) {
        form.price = 0;
      } else {
        form.price = data.price;
      }
    },
    saveInfo() {
      addTrial({
        createBy: this.form.create_by,
        appCode: this.form.app_code,
        proposerCode: this.form.proposer_code,
        proposerType: this.form.proposer_type,
        recordId: this.form.record_id,
        appOrg: this.form.app_org,
        fauditpoint: this.form.fauditpoint,
        orderType: this.form.order_type,
        appName: this.form.app_name,
        price: this.form.price,
        remark: this.form.remark,
      }).then((res) => {
        this.$message({
          type: "success",
          message: "成功!",
        });
        this.dialogVisible = false;
        this.closeFun();
      });
    },
    queryData() {
      this.loading = true;
      getApp(this.queryPanel.app_name, this.queryPanel.app_type).then((res) => {
        debugger;
        // var data = JSON.parse(res.data);
        let data = res.data.dataPack.rows;
        for (let i = 0; i < data.length; i++) {
          if (data[i].app_img) {
            data[i].app_img = `${this.imgurl}${data[i].app_img.split(";")[2]}`;
          } else {
            data[i].app_img =
              "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
          }
        }
        this.productData = data;
        this.loading = false;
      });
    },
    closeFun() {
      this.form.record_id = null;
      this.form.app_code = null;
      this.form.proposer_code = null;
      this.form.proposer_type = null;
      this.form.app_org = null;
      this.form.order_type = null;
      this.form.app_name = null;
      this.form.create_by = null;
      this.form.price = null;
      this.form.remark = null;
    },
  },
  mounted() {},
  created() {
    this.queryData();
    getImg().then((res) => {
      this.imgurl = res.data;
    });
  },
};
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.product {
  height: calc(100vh - 84px);
  width: 100%;
  // display: flex;
  background-color: #f3f3f3;
  padding: 15px;
  ul {
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;
    list-style: none;
    li {
      width: 24%;
      // height: 44%;
      margin-bottom: 15px;
      margin-right: 1%;
      &:nth-child(4n) {
        margin-right: 0px;
      }
      .product_img {
        height: 70%;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .product_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 10px;
        height: 30%;
        background: #fff;
        .product_content_text {
          width: 50%;
          padding: 2% 0;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          h4 {
            padding: 0;
            margin: 0;
            font-size: 12px;
          }
          p {
            margin: 0;
            padding: 0;
            font-size: 16px;
            span {
              font-weight: bold;
              color: #ff5e00;
              margin-right: 4px;
              sub {
                margin-bottom: 2px;
              }
            }
          }
        }
        .product_content_btn {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: flex-end;
          flex-direction: column;
          justify-content: space-between;
          span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 70px;
            height: 42%;
            font-size: 12px;
            color: #0099ff;
            border: 1px solid #0099ff;
            cursor: pointer;
            &:nth-child(1) {
              background: #0099ff;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>